<template>
  <div class="custom-tree-container">
    <p>Using render-content</p>
    <el-tree
        style="max-width: 600px"
        :data="dataSource"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <span>{{ node.label }}</span>
          <div>
            <el-button type="primary" link @click="append(data)">
              Append
            </el-button>
            <el-button
                style="margin-left: 4px"
                type="danger"
                link
                @click="remove(node, data)"
            >
              Delete
            </el-button>
          </div>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
let id = 1000
const dataSource = ref([
  {
    id: 1,
    label: '中国铁路昆明局集团有限公司',
    children: [
      {
        id: 4,
        label: '集团公司机关部门',
        children: [
          {
            id: 9,
            label: '信息技术所',
          },
          {
            id: 10,
            label: '科技和信息化部',
          },
        ],
      },
    ],
  }
])

const append = (data) => {
  const newChild = { id: id++, label: 'testtest', children: [] }
  if (!data.children) {
    data.children = []
  }
  data.children.push(newChild)
  console.log(data)
  dataSource.value = [...dataSource.value]
}

const remove = (node, data) => {
  const parent = node.parent
  const children = parent.data.children || parent.data
  const index = children.findIndex((d) => d.id === data.id)
  children.splice(index, 1)
  dataSource.value = [...dataSource.value]
}


</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>